<template>
  <div class="canvas-board">
    <div class="toolbar">
      <input 
        type="color" 
        v-model="brushColor" 
        title="选择画笔颜色"
        class="tool-btn"
      >
      <input 
        type="range" 
        v-model="brushSize" 
        min="1" 
        max="50" 
        title="调整画笔粗细"
        class="tool-btn"
      >
      <span class="size-display">{{ brushSize }}px</span>
      <button @click="clearCanvas" class="tool-btn" title="清除画布">
        清除
      </button>
      <button @click="exportToJPG" class="tool-btn" title="导出为JPG">
        导出JPG
      </button>
    </div>
    
    <canvas 
      ref="canvasRef" 
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="stopDrawing"
      class="drawing-canvas"
    ></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'

const canvasRef = ref<HTMLCanvasElement | null>(null)
const brushColor = ref('#000000')
const brushSize = ref(5)
const isDrawing = ref(false)
const lastX = ref(0)
const lastY = ref(0)

// 初始化画布
const initCanvas = () => {
  if (!canvasRef.value) return
  
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  if (!ctx) return
  
  // 设置画布尺寸
  canvas.width = canvas.offsetWidth
  canvas.height = canvas.offsetHeight
  
  // 设置默认样式
  ctx.lineCap = 'round'
  ctx.lineJoin = 'round'
  ctx.strokeStyle = brushColor.value
  ctx.lineWidth = brushSize.value
}

// 开始绘制
const startDrawing = (e: MouseEvent) => {
  if (!canvasRef.value) return
  
  isDrawing.value = true
  const rect = canvasRef.value.getBoundingClientRect()
  lastX.value = e.clientX - rect.left
  lastY.value = e.clientY - rect.top
}

// 处理触摸开始
const handleTouchStart = (e: TouchEvent) => {
  if (!canvasRef.value) return
  e.preventDefault()
  
  isDrawing.value = true
  const rect = canvasRef.value.getBoundingClientRect()
  const touch = e.touches[0]
  lastX.value = touch.clientX - rect.left
  lastY.value = touch.clientY - rect.top
}

// 处理触摸移动
const handleTouchMove = (e: TouchEvent) => {
  if (!isDrawing.value || !canvasRef.value) return
  e.preventDefault()
  
  const rect = canvasRef.value.getBoundingClientRect()
  const touch = e.touches[0]
  const currentX = touch.clientX - rect.left
  const currentY = touch.clientY - rect.top
  
  drawToCanvas(currentX, currentY)
  lastX.value = currentX
  lastY.value = currentY
}

// 绘制
const draw = (e: MouseEvent) => {
  if (!isDrawing.value || !canvasRef.value) return
  
  const rect = canvasRef.value.getBoundingClientRect()
  const currentX = e.clientX - rect.left
  const currentY = e.clientY - rect.top
  
  drawToCanvas(currentX, currentY)
  lastX.value = currentX
  lastY.value = currentY
}

// 实际绘制到画布
const drawToCanvas = (x: number, y: number) => {
  if (!canvasRef.value) return
  
  const ctx = canvasRef.value.getContext('2d')
  if (!ctx) return
  
  ctx.beginPath()
  ctx.moveTo(lastX.value, lastY.value)
  ctx.lineTo(x, y)
  ctx.stroke()
}

// 停止绘制
const stopDrawing = () => {
  isDrawing.value = false
}

// 清除画布
const clearCanvas = () => {
  if (!canvasRef.value) return
  
  const ctx = canvasRef.value.getContext('2d')
  if (!ctx) return
  
  ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
}

// 导出为JPG
const exportToJPG = () => {
  if (!canvasRef.value) return
  
  const dataURL = canvasRef.value.toDataURL('image/jpeg')
  const link = document.createElement('a')
  link.download = 'canvas-drawing.jpg'
  link.href = dataURL
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 监听画笔颜色和粗细变化
watch([brushColor, brushSize], ([newColor, newSize]) => {
  if (!canvasRef.value) return
  
  const ctx = canvasRef.value.getContext('2d')
  if (!ctx) return
  
  ctx.strokeStyle = newColor
  ctx.lineWidth = newSize
})

// 组件挂载时初始化
onMounted(() => {
  initCanvas()
  window.addEventListener('resize', initCanvas)
})
</script>

<style scoped>
.canvas-board {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #ffffff;
  border-bottom: 1px solid #e9ecef;
  flex-wrap: wrap;
}

.tool-btn {
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.tool-btn:hover {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.tool-btn[type="color"] {
  width: 40px;
  height: 40px;
  padding: 2px;
  border-radius: 50%;
  overflow: hidden;
}

.tool-btn[type="range"] {
  width: 100px;
}

.size-display {
  font-size: 14px;
  color: #6c757d;
  min-width: 40px;
}

.drawing-canvas {
  flex: 1;
  width: 100%;
  height: 100%;
  background: white;
  cursor: crosshair;
  touch-action: none;
}

@media (max-width: 768px) {
  .toolbar {
    padding: 8px;
    gap: 8px;
  }
  
  .tool-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .tool-btn[type="range"] {
    width: 80px;
  }
}
</style>